<template>
    <div class="header-warp flex flex-center " :style="{ 'background-color': headerBgColor }"
        v-scroll-animate="'fadeInDown'">
        <div class="main-wrap flex flex-sb flex-ai-center ">
            <a href="">
                <div class="flex flex-jc-start flex-ai-center">
                    <img src="@/assets/images/logo_h.png" alt="">
                    <div class="ml-10">
                        <div class="f-22 f-bold">{{ props.title }}</div>
                        <div class="f-14 c-99">{{ props.subTitle }}</div>
                    </div>
                </div>
            </a>
            <div class="flex flex-jc-start flex-ai-center f-16 c-33 nav">
                <template v-if="props.type === 'model'">
                    <a href="javascript:void(0)" class="ml-50 cursor-pointer"
                        @click="scrollToSection('product')">产品概述</a>
                    <a href="javascript:void(0)" class="ml-50 cursor-pointer"
                        @click="scrollToSection('capability')">核心能力</a>
                    <a href="javascript:void(0)" class="ml-50 cursor-pointer"
                        @click="scrollToSection('technology')">技术优势</a>
                </template>
                <template v-else-if="props.type === 'analysis'">
                    <a href="javascript:void(0)" class="ml-50 cursor-pointer"
                        @click="scrollToSection('product')">产品概述</a>
                    <a href="javascript:void(0)" class="ml-50 cursor-pointer"
                        @click="scrollToSection('advantage')">核心优势</a>
                    <a href="javascript:void(0)" class="ml-50 cursor-pointer" @click="scrollToSection('path')">实现路径</a>
                    <a href="javascript:void(0)" class="ml-50 cursor-pointer"
                        @click="scrollToSection('access')">接入方式</a>
                    <a href="javascript:void(0)" class="ml-50 cursor-pointer"
                        @click="scrollToSection('security')">数据安全</a>
                </template>
                <template v-else-if="props.type === 'written'">
                    <a href="javascript:void(0)" class="ml-50 cursor-pointer"
                        @click="scrollToSection('product')">产品概述</a>
                    <a href="javascript:void(0)" class="ml-50 cursor-pointer"
                        @click="scrollToSection('capability')">编写功能</a>
                    <a href="javascript:void(0)" class="ml-50 cursor-pointer"
                        @click="scrollToSection('collaboration')">多人协作</a>
                    <a href="javascript:void(0)" class="ml-50 cursor-pointer"
                        @click="scrollToSection('assistant')">智能辅助</a>  
                </template>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
const props = defineProps({
    type: {
        type: String,
        default: 'model'

    },
    title: {
        type: String,
        default: '知也大模型'
    },
    subTitle: {
        type: String,
        default: '标准专业领域大模型'
    }

})

// 创建响应式变量来控制header的背景色
const headerBgColor = ref('rgba(12, 44, 105, 0.02)');
// 滚动处理函数
const handleScroll = () => {
    // 获取当前滚动距离
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

    // 当滚动超过100px时，背景色变为白色
    if (scrollTop > 100) {
        headerBgColor.value = '#FFFFFF';
    } else {
        // 否则恢复原始背景色
        headerBgColor.value = 'rgba(12, 44, 105, 0.02)';
    }
};

// 添加平滑滚动函数
const scrollToSection = (sectionId) => {
    const element = document.getElementById(sectionId);
    if (element) {
        const rect = element.getBoundingClientRect();
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        const targetPosition = rect.top + scrollTop - 80;
        window.scrollTo({
            top: targetPosition,
            behavior: 'smooth'
        });
    }
}
// 组件挂载时添加滚动事件监听
onMounted(() => {
    window.addEventListener('scroll', handleScroll);
});

// 组件卸载时移除滚动事件监听
onUnmounted(() => {
    window.removeEventListener('scroll', handleScroll);
});

</script>
<style scoped lang="scss">
.header-warp {
    width: 100%;
    height: 76px;
    background-color: rgba(12, 44, 105, 0.02);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    transition: background-color 0.3s ease;

    .nav a:hover {
        color: #045CFF;
    }
}
</style>